<template>
	<div class="exchange-wrap">
		<div class="title-box">
			<div class="title1">
				券领取成功
			</div>
			<div class="title2">
				请以领取手机号登录车享家APP<br/>
				在我的-优惠券中查看
			</div>
			<a href="//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0623_ldxwx" class="btn" ca="推荐有礼_领取成功$下载车享家APP">下载车享家APP</a>
		</div>
		<div class="logo"></div>
		<div class="mask" style="display: none;"></div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	export default{
		data (){
			return {
				
			};
		},
		components: {},
		created (){
			
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
	height: 100%;
	}
	.exchange-wrap {
		height: 100%;
		position: relative;
		background: #ffffff url(../../../assets/image/invitefriends2/download/index-bg.png) center top no-repeat;
		background-size: 100% 100%;
		.title-box {
			padding-top: 20.9rem;
			text-align: center;
			.title1 {
				height: 3.2rem;
				line-height: 3.2rem;
				font-size:23px;
				font-weight: 800;
				color:#243742;
			}
			.title2 {
				margin-top: 1rem;
				line-height: 2.1rem;
				font-size:15px;
				color:#4f5b63;
			}
			.btn {
				display: block;
				margin: 0 auto;
				margin-top: 4rem;
				width: 25rem;
				height: 4.6rem;
				line-height: 4.6rem;
				background: #0084ff;
				border-radius: 0.4rem;
				font-size: 1.7rem;
				color: #ffffff;
			}
		}
		.logo {
			margin: 0 auto;
			margin-top: 13.2rem;
			width: 9.4rem;
			height: 3.6rem;
			background: transparent url(../../../assets/image/invitefriends2/download/logo-cxj.png) center center no-repeat;
			background-size: contain;
		}
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
		}
		.slideUp{
	        animation: slideUp 400ms ease-in forwards;
	        -webkit-animation: slideUp 400ms ease-in forwards;
	    }
	    @-webkit-keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    @keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    .slideDown{
	        animation: slideDown 400ms ease-in forwards;
	        -webkit-animation: slideDown 400ms ease-in forwards;
	    }
	    @-webkit-keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	    @keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	}
</style>
